<template>
    <div id="top">
        <svg @click="fanHui">
            <use xlink:href="#icon-houtui"></use>
        </svg>
        <h2>歌单</h2>
    </div>
    <div id="gedan">
        <ul>
            <li v-for="item of geDanList" @click="getMusic(item.id)">
                <img :src="item.coverImgUrl" alt="">
                <p>{{item.name}}</p>
            </li>
        </ul>
    </div>
    <div id="music">
        <ol>
            <li v-for="item of musicList" @click="boFang(item.id)">
                <div>
                    {{item.name}}
                </div>
            </li>
        </ol>
    </div>
</template>

<script>
    import {getBanner} from "../api";

    export default {
        name: "PlayMusicView",
        data(){
            return{
                geDanList:[],
                musicList: [],
                url:''
            }
        },
        mounted() {
            console.log(this.$route.query)
            getBanner(`/related/playlist?id=${this.$route.query.id}`)
                .then(response=>{
                    console.log(response.data)
                    this.geDanList = (response.data.playlists)
                })
        },
        methods:{
            getMusic(id){
                getBanner(`/playlist/track/all?id=${id}`)
                    .then(response=>{
                        this.musicList=response.data.songs
                        console.log(response.data.songs)
                    })
            },
            boFang(id){
                getBanner(`/song/url?id=${id}`)
                    .then(response=>{
                        console.log(response.data)
                        console.log(response.data.data[0].url)
                        this.url=response.data.data[0].url
                        console.log(this.url)
                        this.$store.dispatch('boFang',this.url)
                    })
            },
            fanHui() {
                history.go(-1)
            }
        }
    }
</script>

<style scoped>
    #top{
        width: 100%;
        height: 50px;
        line-height: 50px;
    }
    #top h2{
        margin: 0;
        display: inline-block;
    }
    svg{
        width: 25px;
        height: 25px;
    }
    #gedan{
        width: 95%;
        height:120px;
        margin-left: 10px;
        overflow: scroll;
    }
    #gedan::-webkit-scrollbar{
        display: none;
    }
    #gedan>ul{
        width: 600px;
        height: 100%;
    }
    #gedan li{
        width: 100px;
        height: 100%;
        margin-right: 15px;
        font-size: 12px;
        float: left;
    }
    img{
        width: 100px;
    }
    ol div{
        width: 90%;
        margin: 0 auto;
        height: 30px;
        line-height: 30px;
    }
    ol>li{
        width: 90%;
        margin-left: 25px;
    }
    #music{
        height: 70vh;
        margin-top: 20px;
        overflow: scroll;
        font-size: 12px;
        background: #fff;
        border-radius: 20px;
    }
    #music::-webkit-scrollbar{
        display: none;
    }
</style>